<template>
	<div class="all">
		<div class="left">
			<left></left>
		</div>
		<div class="right">
			<div class="top">
				<top></top>
			</div>
			<div class="content">
				<div class="table">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column label="操作人">
							<template slot-scope="scope">
								{{ scope.row.createBy }}
							</template>
						</el-table-column>
						<el-table-column label="所属分销商">
							<template slot-scope="scope">
								{{ scope.row.agentName }}
								
							</template>
						</el-table-column>
						<el-table-column label="添加数量">
							<template slot-scope="scope">
								{{ scope.row.num }}
							</template>
						</el-table-column>
						<el-table-column label="添加时间">
							<template slot-scope="scope">
								{{ scope.row.createTime }}
							</template>
						</el-table-column>


						<el-table-column label="操作">
							<template slot-scope="scope">
								<el-button type="text" @click="mingxi(scope.row.id)">下载明细</el-button>
								<el-button type="text" v-if="scope.row.delFlag == 0" @click="chexiao(scope.row.id)">撤销</el-button>
								<el-button type="text" disabled v-if="scope.row.delFlag == 1" >已撤销</el-button>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination style="text-align: right; padding: 20px;" background layout="total,prev, pager, next" :current-page="page"
					 @current-change="fanye" :page-size="page_size" :total="total"></el-pagination>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import axios from 'axios'
	import top from '@/components/top.vue'
	import left from '@/components/left.vue'
	import FileSaver from 'file-saver'
	import XLSX from "xlsx"
	export default {
		name: 'ka',
		components: {
			left,
			top
		},
		data() {
			return {
				options: [],
				fileList: [],
				jia: {
					file: "",
					start_num: "",
					end_num: "",
					agent_id: "",
					radio: "1"
				},
				taocan: {
					mobile: ""
				},
				changecon: {

				},
				search: {
					iccid: "",
					time: "",
					start: "",
					end: ""
				},
				log: false,
				page: 1,
				page_size: 20,
				total: 0,
				loading: false,
				tableData: []
			}
		},
		watch: {
			// num:function(newValue, oldValue) {
			//   console.log(newValue, oldValue)
			// }
		},
		computed: {
			// zongjia:function(){
			//   return this.num * 100
			// }
		},
		created() {
			this.getlist()
			this.getfenxiaoshang()
		},
		methods: {
			mingxi:function(id){
				
				this.axios.get(this.url + `/work/addCardRecord/findList?id=`+id)
					.then(response => {
						if (response.data.success == true) {
							
							
							let multipleSelection = response.data.result
							var wopts = {
								bookType: 'xlsx',
								bookSST: true,
								type: 'binary'
							};
							var workBook = {
								SheetNames: ['Sheet1'],
								Sheets: {},
								Props: {}
							};
							var table = [];
							for (var i = 0; i < multipleSelection.length; i++) {
								var params = {
									acessNumber: multipleSelection[i].acessNumber,
									activateMonth: multipleSelection[i].activateMonth,
									beginTime: multipleSelection[i].beginTime,
									createBy: multipleSelection[i].createBy,
									createTime: multipleSelection[i].createTime,
									delFlag: multipleSelection[i].delFlag,
									endTime: multipleSelection[i].endTime,
									iccid: multipleSelection[i].iccid,
									id: multipleSelection[i].id,
									importId: multipleSelection[i].importId,
									isRealName: multipleSelection[i].isRealName,
									merchantId: multipleSelection[i].merchantId,
									merchantName: multipleSelection[i].merchantName,
									packageId: multipleSelection[i].packageId,
									paidMonth: multipleSelection[i].paidMonth,
									phone: multipleSelection[i].phone,
									reason: multipleSelection[i].reason,
									status: multipleSelection[i].status,
									updateBy: multipleSelection[i].updateBy,
									updateTime: multipleSelection[i].updateTime,
									useFlow: multipleSelection[i].useFlow,
									userId: multipleSelection[i].userId
								}
								table[i] = params
							};
							workBook.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(table);
							FileSaver.saveAs(new Blob([this.changeData(XLSX.write(workBook, wopts))], {
								type: 'application/octet-stream'
							}), "sheetjs.xlsx")
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			changeData: function(s) {
				//如果存在ArrayBuffer对象(es6) 最好采用该对象
				if (typeof ArrayBuffer !== 'undefined') {
					//1、创建一个字节长度为s.length的内存区域
					var buf = new ArrayBuffer(s.length);
					//2、创建一个指向buf的Unit8视图，开始于字节0，直到缓冲区的末尾
					var view = new Uint8Array(buf);
					//3、返回指定位置的字符的Unicode编码
					for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
					return buf;
				} else {
					var buf = new Array(s.length);
					for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
					return buf;
				}
			},
			chexiao:function(id){
				
				this.$confirm('是否真的删除此套餐?', '确认提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.post(this.url + `/work/addCardRecord/delete?id=`+id)
						.then(response => {
							if (response.data.success == true) {
								this.getlist()
								this.$message.success('操作成功');
							} else {
								this.$message.error(response.data.message);
							}
						})
				})
			},
			handleExceed: function(files, fileList) {
				this.$message.warning(`最多选择一个文件`);
			},
			shangchuan: function(file) {
				this.jia.file = file.raw
			},
			go: function(url, id) {
				this.$router.push({
					path: url,
					query: {
						id: id
					}
				})
			},
			xiazai: function() {
				const a = document.createElement('a');
				a.setAttribute('download', '加卡导入模板.xlsx');
				a.setAttribute('href', '/work/card/getEecelDemo');
				a.click();
			},
			//获取分销商
			getfenxiaoshang: function() {
				this.axios.get(this.url + `/work/agent/list?pageNo=${this.page}&pageSize=1000`)
					.then(response => {
						if (response.data.success == true) {
							this.options = response.data.result.records
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			timechange: function() {
				if (this.search.time == null) {
					this.search.start = ""
					this.search.end = ""
				} else {
					this.search.start = this.search.time[0]
					this.search.end = this.search.time[1]
				}
			},
			//翻页
			fanye: function(page) {
				this.loading = true
				this.page = page
				this.getlist()
			},
			//获取列表
			getlist: function() {
				this.axios.get(this.url + `/work/addCardRecord/list?pageNo=${this.page}&pageSize=${this.page_size}`)
					.then(response => {
						if (response.data.success == true) {
							this.tableData = response.data.result.records
							this.total = response.data.result.total
							this.loading = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			tianjia: function() {

				if (this.jia.start_num == '' && this.jia.end_num == '' && this.jia.file == '') {
					this.$message.error('必须选择文件或者填写区间');
				}

				let url = ""
				var formData = new FormData();

				if (this.jia.radio == 2) {
					url = this.url + `/work/card/addCardBatch`
					formData.append("id", this.jia.agent_id)
					formData.append("file", this.jia.file)
				} else {
					url = this.url +
						`/work/card/addCardBatchWithNum?agent_id=${this.jia.agent_id}&end_num=${this.jia.end_num}&start_num=${this.jia.start_num}`
				}

				this.axios.post(url, formData)
					.then(response => {
						if (response.data.success == true) {
							this.loading = true
							this.getlist()
							this.$message.success("添加成功");
							this.log = false
						} else {
							this.$message.error(response.data.message);
						}
					})
			},
			change: function() {
				this.log = true
			}
		},

	}
</script>

<style scoped lang="less">
	.all {
		display: flex;
		height: 100vh;

		.left {
			width: 200px;
			height: 100%;
			background: #414652;
			box-shadow: 0 2px 10px #2D3038;
		}

		.right {
			width: calc(100% - 180px);
			height: 100%;
			overflow: auto;

			.content {
				padding: 20px;

				.table {
					margin-top: 20px;
				}
			}
		}
	}
</style>
